```vue
<template>
	<view class="index">
		<map class="map" id="map" :latitude="latitude" :longitude="longitude" 
		show-location="true" :scale="scale" :markers="markers" @markertap="tap" @bindcallouttap="callouttap">	
		</map>
		
		<view class="view" @click="goto1()">
			<text class="text" style="font-size: 23rpx;line-height: 35rpx;">
			选择避灾\n安置场所
			</text>
			
		</view>
		<view class="view1" @click="getMylocation()">
			<text class="text" style="font-size: 23rpx;line-height: 35rpx;">
			定位当前\n我的位置
			</text>
		</view>
		<view style="border-radius: 30rpx;position: absolute;margin-top: -10px;background-color: #fff;width: 100%;box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.5);bottom: 0;height: 646rpx">
		<view class="index1" >
			<view style="font-size: large;font-weight: 500;">{{name}}</view>
			<view class="flex">
				<view style="margin-top: 20rpx ;font-size: 28rpx;">{{address}}</view>
					<view style="display: flex;margin-top: 6rpx;">
						<view style="font-size: 28rpx;">负责人电话：</view>
						<view style="font-size: 28rpx;color: #0052FF;" @click="isLeave()">{{phonenumber}}</view>
						<image src="../../static/logo2.png" mode="aspectFit" style="width: 40rpx;height: 40rpx;" @click="isLeave()"></image>
					</view>
				<view class="flex1">
					<view style="font-size: smaller; margin-top: 6rpx;color: #666666; display: flex;">
						<view>距您</view>
						<view>{{distance | filterDis}}</view>
					</view> 
					<view class="oringe" style="font-size: 10px;margin: 8rpx 8rpx;">可接纳200人</view>
					<!-- <view class="oringe" style="font-size: 10px;margin: 8rpx 4rpx;">设备齐全</view> -->
				</view>		
			</view>
		</view>
		<view class="flex2">
			<view class=".flex3" style="display: flex; " v-if="checkTime!=null">
				<view >规范化建设已于</view>
				<view style="padding-left: 10rpx;padding-right: 10rpx;">{{checkTime}}</view>
				<view > 进行排查</view>
			</view>	
			<view style="display: flex;" class=".flex3" v-if="answerTime!=null">
				<view>房屋安全已于 </view>
				<view style="padding-left: 10rpx;padding-right: 10rpx;">{{answerTime}}</view>
				<view > 进行排查</view>
			</view>	
				
		</view>
		<view class="flex4">
			<!-- <view class="iconfont" @click="isLeave()" >&#xe637;</view>
			<view class="iconfont1" @click="isLeaves()" >&#xe650;</view>
			<view class="flex5">
				<view class="number">电话联系</view>
				<view class="number1">查看详细信息</view>
			</view> -->
			<view class="button2" @click="goto()">我要导航前往</view>
		</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		components:{},
		filters:{
			filterDis(e){
				// console.log(e,'eeeeee');
				if(e<1000){
					return e ? e.toFixed(0)+'米' : '';
				}else if(e==null){
					return '0米';
				}else{
					return (e/2/500).toFixed(2)+'千米';
				}
				
			}
		},
		data() {
			return {
				longitude:"",
				latitude:"",
				scale:15,
				markers:[],
				content:'13578784455',
				X:'',
				Y:'',
				aa:[],
				maps:[],
				bb:"",
				name:'',
				address:'',
				phonenumber:'',
				checkTime:'',
				answerTime:'',
				distance:0,
				A:'',
				B:'',
				Dis:[],
				maps1:[],
				distance1:'',
				name1:'',
				address1:'',
				phonenumber1:'',
				checkTime1:'',
				answerTime1:'',
				jingdu:'',
				weidu:'',
				areaId:''
			}
		},
		
		onLoad(options) {
			
			try {
				const Z = uni.getStorageSync('areaId');
				this.areaId=Z;	
			    if (Z) {
			        // console.log(X);
			    }
				
			} catch (e) {
			    // error
			}
			var data=options.name;
			console.log(data);
			this.name=data;
			uni.getStorage({
				key: 'lng',
				success:(res)=>{
					// console.log(res)
					
				}
			})
			try {
			    const X = uni.getStorageSync('lng');
				this.A=X;
			    if (X) {
			        // console.log(X);
			    }
			} catch (e) {
			    // error
			}
			uni.getStorage({
				key: 'lat',
				success:(res)=>{
					// console.log(res)
					
				}
			})
			try {
			    const Y = uni.getStorageSync('lat');
				this.B=Y
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			}
			 console.log(this.name);
			
		},
		
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			console.log('test--');
			// this.getName1();
			this.getName1().then(()=>{
				this.getName().then(()=>{
					// console.log(3333);
					var that = this
					
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy:true,
						highAccuracyExpireTime:'1000',
						geocode:true,
						success: function (res) {
							console.log(res);
						        console.log('当前位置的经度：' + res.longitude);
						        console.log('当前位置的纬度：' + res.latitude);
								// this.A=res.longitude;
								// console.log(this.data.A);
								// that.B=res.latitude;
								uni.setStorage({
									key:'lng',
									data: res.longitude
								})
								uni.setStorage({
									key:'lat',
									data: res.latitude
								})
								//定义刚进入时的经纬度
								that.latitude=that.Y
								that.longitude=that.X
					            //标记点集合
								let arr =[ ]
								 let markers = []
					            //标记点
					            let point=
					                {
										id:"",
					                	longitude:0,
								        latitude:0,
										name:"",
					            	}
					            //maps赋值给arr
								 //console.log('maps:',that.maps[1].x);
					            for(var j=0;j<that.maps.length;j++)
								{
					                 //console.log('maps-x:'+that.maps[j].x+'   maps-y:'+that.maps[j].y)
									// if(that.maps[j].x==undefined){
									// 	point.longitude=that.longitude
									// 	point.latitude=that.latitude
									// }else{
										point.longitude=that.maps[j].x
										point.latitude=that.maps[j].y
										point.distance=that.maps[j].distance
									// }
					                point.id=j
									point.name=that.maps[j].name
									//console.log(point.name);
					                //console.lo g('point:',point)
					                // arr.push(point)
									markers=markers.concat({
										longitude: point.longitude,//经度
										latitude: point.latitude,//纬度
										name:point.name,
										id:point.id,
										distance:point.distance,
										iconPath:'./../../static/coordinate@3x.png',
										width:28,
										height:40,
										callout: {
											content: point.name,
											fontSize:16,
											padding:8,
											color:'#666666',
											borderRadius:8,
										} 
									 })
					            }
								
					            // console.log(markers); 
								that.markers=markers							
						    }
					})
					uni.hideLoading();;
				})
			})
			// console.log(2222222);
			
			
			
			
		},
		onReady() {
			this.map=uni.createMapContext("map",this);
		},
		methods: {
			
			getName(){
				return new Promise((resolve)=>{
					let that = this;
						// console.log(this.maps);
						this.$myRequest({
							url:'/project_flood/v1/owner_flood/point',
							data:{"name": "","point":"","areaId":this.areaId}
						}).then((res)=>{
							this.maps = res.data.data;
							resolve()
					})
				})
			
			},
			async getName1(){
				console.log(this.maps,'this.maps');
				this.$myRequest({
					url:'/project_flood/v1/owner_flood/point',
					data:{"name":this.name,"point":this.A+","+this.B,"areaId":this.areaId}
				}).then((res)=>{
					//  console.log(res);
					this.maps1=res.data.data
					this.name=res.data.data[0].name;
					this.address = res.data.data[0].address;
					this.phonenumber=res.data.data[0].corporationMobile;
					this.checkTime=res.data.data[0].checkTime;
					this.answerTime=res.data.data[0].answerTime;
					this.distance=res.data.data[0].distance;
					this.X=res.data.data[0].x;
					this.Y=res.data.data[0].y;
					
					//找所有标记点中distance最小的点
					for(let i=0;i<this.maps.length;i++){
						if(this.maps[i].distance==null){
							this.Dis.push(999999999999999)
						}else{this.Dis.push(this.maps1[i].distance)}
						
					}
					this.distance1=Math.min(...this.Dis);
					 // console.log(this.distance1);
						 for(let i=0;i<this.maps.length;i++){
						 	if(this.maps[i].distance==this.distance1){
						 		this.name1=this.maps[i].name;
						 		this.address1=this.maps[i].address;
								this.phonenumber1=this.maps[i].corporationMobile;
								this.checkTime1=this.maps[i].checkTime;
								this.answerTime1=this.maps[i].answerTime;
								this.jingdu=this.maps[i].x;
								this.weidu=this.maps[i].y;
								
						 	}
						 	
						 }
						 // console.log(this.name1);
						 
				})
				
			},
			getMylocation(){
				this.map.moveToLocation();
			},
			goto1(){
				uni.navigateTo({
					url:'../choose/choose'
				})
				
			},
			tap(e){
							this.name=this.markers[e.markerId].name;
							this.getName1();
					}, 
			callouttap(e){
				console.log(e);
			},
			isLeave(id){
				var that=this;
				uni.showModal({
				    title: '拨打负责人电话',
					content:that.phonenumber,
				    
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm) {
							console.log(that.phonenumber),
				            uni.makePhoneCall({
								phoneNumber: that.phonenumber,
									
								success: (res) => {
								console.log('调用成功!')	
								},
								// 失败回调
								fail: (res) => {
								console.log('调用失败!')
								}
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			goto(){
				var that = this   
				uni.openLocation({
					latitude: that.Y,
					longitude: that.X,
					name:that.name,
					address:that.address,
					success: function () {
						console.log('success');
					}
				});
				        
				    
			},
			isLeaves(){
				uni.navigateTo({
					url:'../message/message'
				})
			},
		},
		onUnload() {
		   uni.reLaunch({
			  url: '../join/firstpage'   //此处是重新定义返回的路径
		   })
		},
		
		 
	}
</script>

<style lang="scss">
	.index{	
		.map{
			width: 750rpx;
			height: 820rpx;
		}	
		.view{
			position:absolute;
			 		left: 630rpx;
			 		top: 570rpx;
					background-color: #ffffff;
					border-radius: 10rpx;
					.text{
						display:block;
						margin:17rpx 6rpx 17rpx 6rpx;
					}
		}
		.view1{
			position:absolute;
			 		left: 630rpx;
			 		top: 690rpx;
					background-color: #ffffff;
					border-radius: 10rpx;
					.text{
						display:block;
						margin:17rpx 6rpx 17rpx 6rpx;
					}
		}
		.index1{
			width: 700rpx;
			top: 800rpx;
			margin:0rpx auto 0rpx;
			padding-top: 50rpx;
			.flex{
				//将两个view放在同一行
				//display: flex;  
				//让两个view平均分配位置
				// .view2{
				// 	flex: 1;
				//}
				.flex1{
					margin-top: 20rpx;
					display: flex;
					.oringe{
						font-weight: 500;
						padding: 3rpx 9rpx;
						color: #FA6400;
						background-color: #FFEFD9;
						border-radius: 3px;
					}
				}
			}
		}
		.flex2{
					width: 690rpx;
					margin: 40rpx auto;
					.flex3{
						font-size: 28rpx;
						color: #666666;
						padding: 6rpx 16rpx;
						 background-color: #eee;
						border-radius: 4px;
						margin-bottom: 15rpx;
					}
				}
	}
	@import '../../common/iconfont.css';
	@import '../../common/iconfont1.css';
	.flex4{
		border-top: 2rpx solid #EFEFEF;
		position: fixed;
		bottom: 40rpx;
		// display: flex;
		// .iconfont{
		// 	font-family: iconfont;
			
		// 	font-size: 50rpx;
		// 	padding-left: 80rpx;
		// 	padding-top:12rpx;
		// 	padding-bottom: 42rpx;
		// }
		// .iconfont1{
		// 	font-family: iconfont;
			
		// 	font-size: 50rpx;
		// 	padding-left: 150rpx;
		// 	padding-top:12rpx;
		// 	padding-bottom: 42rpx;
			
		// }
		// .flex5{
		// 	display: flex;
		// 	.number{
		// 		font-size: 25rpx;
		// 		margin-left: -270rpx;
		// 		margin-top: 60rpx;
				
		// 	}
		// 	.number1{
		// 		font-size: 25rpx;
		// 		margin-left: 79rpx;
		// 		margin-top: 60rpx;
				
		// 	}
		// }
		.button2{
			margin: 20rpx auto 0;
			background-color: #0152FF;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
			padding: 20rpx ;
			padding-left: 255rpx;
			border-radius: 56rpx;
			width: 400rpx;
		}
	}	
</style>

```

